import styled from 'styled-components';
import Icon from './Icon';
import {NavLink} from 'react-router-dom';
import React from 'react';
import 'helper.scss';

const theme = {
    main: {
        colorGray: '#BDBDBD',
        colorOrange: '#FD9A16',
        colorBlue: '#2966C1'
    }
}

const StyledNav = styled.nav`
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  > ul {
    display: flex;
    > li {
      width: 33.333%;
      text-align: center;
      padding: 5px 0;
      > a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: ${props => props.theme.main.colorGray};
        > svg {
          height: 32px;
          width: 32px;
          padding-bottom: 2px;
          --color-1: ${props => props.theme.main.colorGray};
          --color-2: ${props => props.theme.main.colorGray};
        }
        &.selected {
          color: ${props => props.theme.main.colorOrange};
          > svg {
            --color-1: ${props => props.theme.main.colorBlue};
            --color-2: ${props => props.theme.main.colorOrange};
          }
        }
      }
    }
  }
`;

const Nav = () => {
    return (
        <StyledNav theme={theme}>
            <ul>
                <li>
                    <NavLink to="/charts" activeClassName="selected">
                        <Icon name="charts"/>
                        <span>统计</span>
                    </NavLink>
                </li>
                <li>
                    <NavLink to="/tally" activeClassName="selected">
                        <Icon name="tally"/>
                        <span>记账</span>
                    </NavLink>
                </li>
                <li>
                    <NavLink to="/details" activeClassName="selected">
                        <Icon name="details"/>
                        <span>明细</span>
                    </NavLink>
                </li>
            </ul>
        </StyledNav>
    );
};

export default Nav;